<template>
  <MainBox :data="data" :loading="data.loading" :isSelect="isSelect" :loadingMsg="data.loadingMsg">
    <template #left v-if="data.tabs">
      <ListBox
        isOverflow
        :active="data.tabs.active"
        :activeKey="data.tabs.activeKey"
        :data="data.tabs.list"
        @onClick="
          (row: any, index: any) => {
            clickFunction(data.tabs.click, row, index);
          }
        ">
        <template #default="{ row }">
          {{ row[data.tabs.titleKey] }}
        </template>
        <template #btn="{ row, index }" v-if="data.tabs?.operation?.length > 0">
          <div v-for="item in data.tabs.operation" v-permission="item.permission">
            <IconBox :icon="item.icon" :title="item.title" @onClick="clickFunction(item.click, row, index)" />
          </div>
        </template>
      </ListBox>
    </template>
    <template #leftHeadBtn v-if="data.tabs && data.tabs.add">
      <el-link type="primary" icon="Plus" v-permission="data.tabs.add.permission" @click="clickFunction(data.tabs.add.click)">新建</el-link>
    </template>
    <template #leftHead>
      <h3>{{ data.tabs.title }}</h3>
    </template>
    <template #default>
      <TableBox
        :data="data.table"
        @searchBtn="searchBtn"
        @resetForm="resetForm"
        @tableRadioBtn="tableRadioBtn"
        @tableCheckboxBtn="tableCheckboxBtn"
        :margin="0"
        :isRadio="isRadio"
        :isCheckbox="isSelect ? isCheckbox : data.table?.checkbox?.state">
        <template #[key]="scope" v-for="(slot, key) in $slots" :key="key">
          <template v-if="['headL', 'search'].includes(key)">
            <slot :name="key" :search="scope.search" />
          </template>
          <template v-else-if="key === 'header'">
            <slot :name="key" />
          </template>
          <template v-else>
            <slot :name="key" :row="scope.row" :index="scope.index" />
          </template>
        </template>
        <template #headR v-if="$slots.headR || !!data.tableAdd">
          <slot name="headR" v-if="$slots.headR" />
          <SelectCom
            :table="data.tableAdd"
            @selectBtn="
              (row: any) => {
                if (proxy.$isFunction(data.tableAdd.selectBtn)) {
                  data.tableAdd.selectBtn(row[0]);
                }
              }
            "
            v-if="!!data.tableAdd">
            <el-button type="primary">{{ `待开单据(${data.tableAdd.tbody.length})` }}</el-button>
            <template #[key]="{ row, index }" v-for="(slot, key) in $slots" :key="key">
              <slot :name="key" :row="row" :index="index" />
            </template>
          </SelectCom>
        </template>
      </TableBox>
    </template>
  </MainBox>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
    isActive?: Function; //
    isRadio?: boolean; //单选
    isCheckbox?: boolean; //多选
    isSelect?: boolean; //是否是选择页面
    maring?: number; //多选
  }>(),
  {},
);
//按钮监听-组合按钮
import { useCombinationKeys } from '@/utils/useKeydown';
useCombinationKeys({ keys: ['Enter'], modifiers: ['ctrl'] }, (event: any) => {
  event.preventDefault();
  switch (event.key) {
    case 'Enter':
      searchBtn();
      break;
  }
});
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'searchBtn'): void;
  (event: 'resetForm'): void;
  (event: 'tableRadioBtn', row: any): void;
  (event: 'tableCheckboxBtn', arr: any): void;
}>();
const searchBtn = () => {
  emit('searchBtn');
};
const resetForm = () => {
  emit('resetForm');
};
//多选数据
const tableCheckboxBtn = (arr: any) => {
  let _checkbox = props.data?.table?.checkbox;
  if (_checkbox) {
    _checkbox.list = arr;
  }
  emit('tableCheckboxBtn', arr);
};
//单选数据
const tableRadioBtn = (row: any) => {
  emit('tableRadioBtn', row);
};
const clickFunction = (click: Function, row?: any, index?: number) => {
  if (click && typeof click === 'function') {
    return click(row, index);
  } else {
    return '';
  }
};
</script>
<style scoped lang="scss"></style>
